<template>
  <div>
    <div class="summary">
      <div ref="dom" class="pieCharts"></div>
      <div class="statistics">
        <div class="statistics-item">
          <span>用例总数：</span>
          <span>{{ total }}</span>
        </div>
        <div class="statistics-item">
          <span>通过数量：</span>
          <span>{{ success }}</span>
        </div>
        <div class="statistics-item">
          <span>失败数量：</span>
          <span>{{ fail }}</span>
        </div>
        <div class="statistics-item">
          <span>通过比例：</span>
          <span>{{ success_pct }} %</span>
        </div>
        <div class="statistics-item">
          <span>执行总耗时：</span>
          <span>{{ total_elapsed_ms }} </span>
        </div>
      </div>
    </div>
    <div class="graphicSymbol">
      <RadioGroup v-model="status" @on-change="getTestsuiteReport" size="small">
        <Radio label="PASS">
          <Icon size="24" :color="statusColor['PASS']" type="ios-leaf" />
          <span>通过</span>
        </Radio>
        <Radio label="PARTIAL_PASS">
          <Icon
            size="24"
            :color="statusColor['PARTIAL_PASS']"
            type="ios-leaf"
          />
          <span>部分通过</span>
        </Radio>
        <Radio label="FAIL">
          <Icon size="24" :color="statusColor['FAIL']" type="ios-leaf" />
          <span>失败</span>
        </Radio>
        <Radio label="DEFAULT">
          <Icon size="24" :color="statusColor['DEFAULT']" type="ios-leaf" />
          <span>全部</span>
        </Radio>
      </RadioGroup>
    </div>
    <div ref="table">
      <Table
        :columns="columns"
        :data="data"
        size="small"
        :tooltip-max-width="500"
      >
        <template slot-scope="{ row }" slot="status">
          <Icon size="24" :color="statusColor[row.status]" type="ios-leaf" />
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import { getTestsuiteReport } from "@/api/HttpAutoTestService/reports";
import Testsuite2TestcaseReport from "./testsuite2testcase-report";
import echarts from "echarts";

export default {
  name: "testsuite-report",
  props: {
    version: {
      type: String,
      default: "",
    },
  },
  components: {
    Testsuite2TestcaseReport,
  },
  watch: {
    version(val) {
      if (val) {
        getTestsuiteReport({ version: val }).then((res) => {
          let data = res.data;
          this.total = data.total;
          this.success = data.success;
          this.fail = data.fail;
          this.success_pct = data.success_pct;
          this.total_elapsed_ms = data.total_elapsed_ms;
          this.testcase_result_success = data.testcase_result_success;
          this.testcase_result_fail = data.testcase_result_fail;
          this.ext_method_result_success = data.ext_method_result_success;
          this.ext_method_result_fail = data.ext_method_result_fail;
          this.data = data.results;
          this.drawCharts();
        });
      }
    },
  },
  data() {
    return {
      status: "DEFAULT",
      statusColor: {
        PASS: "#19be6b",
        PARTIAL_PASS: "#ff9900",
        FAIL: "#ed4014",
        DEFAULT: "#2db7f5",
      },
      total: 0,
      success: 0,
      fail: 0,
      success_pct: 0.0,
      total_elapsed_ms: "00:00:00.000",
      testcase_result_success: 0,
      testcase_result_fail: 0,
      ext_method_result_success: 0,
      ext_method_result_fail: 0,
      columns: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(Testsuite2TestcaseReport, {
              props: {
                data: params.row.result,
              },
            });
          },
        },
        {
          title: "场景名称",
          key: "testsuite_name",
          minWidth: 350,
          align: "center",
          tooltip: true,
        },
        {
          title: "项目",
          key: "project_name",
          minWidth: 350,
          align: "center",
          tooltip: true,
        },
        {
          title: "用例总数",
          key: "total",
          width: 120,
          align: "center",
        },
        {
          title: "通过数量",
          key: "success",
          width: 120,
          align: "center",
        },
        {
          title: "失败数量",
          key: "fail",
          width: 120,
          align: "center",
        },
        {
          title: "通过比例 %",
          key: "success_pct",
          width: 120,
          align: "center",
        },
        {
          title: "执行耗时(ms)",
          key: "elapsed_ms",
          width: 120,
          align: "center",
        },
        {
          title: "场景ID",
          key: "testsuite_id",
          align: "center",
          width: 270,
          tooltip: true,
        },
        {
          title: "测试结果",
          slot: "status",
          align: "center",
          width: 85,
          fixed: "right",
        },
      ],
      data: [],
    };
  },
  methods: {
    drawCharts() {
      this.$nextTick(() => {
        let option = {
          tooltip: {
            trigger: "item",
            position: ["90%", "80%"],
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          series: [
            {
              name: "测试报告",
              type: "pie",
              radius: ["50%", "80%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "normal",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: this.testcase_result_success,
                  name: "通过用例",
                  itemStyle: { color: "#19be6b" },
                },
                {
                  value: this.testcase_result_fail,
                  name: "失败用例",
                  itemStyle: { color: "#ed4014" },
                },
                {
                  value: this.ext_method_result_success,
                  name: "通过扩展方法",
                  itemStyle: { color: "#2db7f5" },
                },
                {
                  value: this.ext_method_result_fail,
                  name: "失败扩展方法",
                  itemStyle: { color: "#ff9900" },
                },
              ],
            },
          ],
        };
        echarts.init(this.$refs.dom, "light").setOption(option);
      });
    },
    getTestsuiteReport(status) {
      // 根据状态过滤场景结果
      let data = { version: this.version };
      if (this.status !== "DEFAULT") {
        data["status"] = this.status;
      }
      getTestsuiteReport(data).then((res) => {
        let data = res.data;
        this.data = data.results;
      });
    },
  },
};
</script>
<style>
.summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pieCharts {
  height: 200px;
  width: 200px;
}
.statistics {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.statistics-item {
  font-weight: bold;
}
.graphicSymbol {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
}
td.ivu-table-expanded-cell {
  padding: 2px 0 2px 50px !important;
}
</style>